<template>
  <div style="padding-top: 10px;">
    <el-tabs v-model="activeName">
      <el-tab-pane label="异常信息" name="first">
        <el-row>
          <el-col :span="24">
            <Portlet title="货物信息">
              <el-form label-position="left" label-width="95px">
                <el-row :gutter="15">
                  <el-col :md="12" :lg="8" :xl="6">
                    <el-form-item label="库位：">
                      <span>{{headerDetail.locationName}}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :md="12" :lg="8" :xl="6">
                    <el-form-item label="商家名称：">
                      <span>{{headerDetail.cargoOwnerName}}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :md="12" :lg="8" :xl="6">
                    <el-form-item label="厂家名称：">
                      <span>{{headerDetail.manuName}}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :md="12" :lg="8" :xl="6">
                    <el-form-item label="所属产品：">
                      <span>{{headerDetail.belongProduct}}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :md="12" :lg="8" :xl="6">
                    <el-form-item label="包件编号：">
                      <span>{{headerDetail.packNo}}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :md="12" :lg="8" :xl="6">
                    <el-form-item label="包件名称：">
                      <span>{{headerDetail.packName}}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :md="12" :lg="8" :xl="6">
                    <el-form-item label="规格：">
                      <span>{{headerDetail.packStandard}}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :md="12" :lg="8" :xl="6">
                    <el-form-item label="颜色：">
                      <span>{{headerDetail.packColor}}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :md="12" :lg="8" :xl="6">
                    <el-form-item label="风格：">
                      <span>{{headerDetail.packStyle}}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :md="12" :lg="8" :xl="6">
                    <el-form-item label="单位：">
                      <span>{{headerDetail.packUnit}}</span>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </Portlet>
          </el-col>
          <el-col :span="24">
            <AbnormalModule :detail="detail"></AbnormalModule>
          </el-col>
          <el-col :span="24">
            <AbnormalOperation ref="AbnormalOperation"
                               :id="id"
                               @refresh="getDetail"
                               v-if="abnormalState != '2'"
                               :detail="detail"
            ></AbnormalOperation>
            <HandleShow ref="HandleShow" :detail="detail" v-if="abnormalState == '2'"></HandleShow>
            <FeeShow ref="FeeShow" :detail="detail" v-if="abnormalState == '2'"></FeeShow>
          </el-col>
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="异常跟进" name="second">
        <FollowUp :id="locationPackId" :objectId="id" :objectType="'CF03'"></FollowUp>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
// import Portlet from '@/components/base/Portlet'
import HandleShow from '@/views/oms/abnormal/list/HandleShow'
import FollowUp from '@/views/oms/business/FollowUp'
// import FollowUp from '@/components/base/FollowUp.vue'
import AbnormalOperation from '@/views/oms/abnormal/list/AbnormalOperation'
import {dotData} from '@/utils'
import AbnormalModule from '@/views/oms/abnormal/list/AbnormalModule'
import FeeShow from '@/views/oms/abnormal/list/FeeShow'
export default {
  name: 'abnormalShow',
  components: {
    // Portlet,
    FollowUp,
    AbnormalOperation,
    HandleShow,
    FeeShow,
    AbnormalModule
  },
  data() {
    return {
      id: this.$route.params.id,
      locationPackId: this.$route.query.locationPackId,
      activeName: 'first',
      detail: {},
      headerDetail: {}
    }
  },
  created() {
    this.getDetail()
    this.getGoodsData()
  },
  computed: {
    abnormalState() { // 为2是已处理
      return dotData(this.detail, 'chAbnormal.abnormalState')
    }
  },
  methods: {
    getDetail() {
      this.$ajax.get('/ms-warehouse-order/orderAbnormal/getAbnormalDetail', {id: this.id}).then(response => {
        if (!response.data) {
          return
        }
        this.detail = response.data || {}
        console.log('this.detail', this.detail)
      })
    },
    getGoodsData() {
      this.$ajax.get('/ms-warehouse-order/orderAbnormal/getStorePacksDetail', {locationPackId: this.locationPackId}).then(response => {
        if (!response.data) {
          return
        }
        this.headerDetail = response.data || {}
        console.log('this.detail', this.headerDetail)
      })
    }
  }
}
</script>
